<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="images/your_ico.ico" type="image/x-icon">
    <link rel="icon" href="images/your_ico.ico" type="image/x-icon">
    <link href="https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css" rel="stylesheet">
    <title>访问者</title>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
    <style>
        /*// 在填充数据之前隐藏*/
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <h1 style="display: inline-block">访问者 </h1><span style="padding-left: 10px;">( 共 <span style="color: red">{{listNum}}</span>人次浏览 )</span>
    <el-button type="primary" style="margin-left: 50px;" size="mini" @click="loadFun">刷新</el-button>

    <template>
        <el-table
                :data="visitorList"
                v-loading="flag"
                border
                style="width: 100%">
            <el-table-column
                    prop="date"
                    fixed
                    label="访问日期"
                    width="300">
            </el-table-column>

            <el-table-column
                    prop="IP"
                    width="180"
                    label="访问者IP">
            </el-table-column>
            <el-table-column
                    prop="CID"
                    label="访问者CID">
            </el-table-column>
            <el-table-column
                    prop="city"
                    label="访问者城市">
            </el-table-column>
            <el-table-column
                    prop="browser"
                    width="300"
                    label="访问者浏览器">
            </el-table-column>
        </el-table>
    </template>
    <h1 style="display: inline-block">留言人</h1><span style="padding-left: 10px;">( 共<span style="color: red">{{visitorNum}}</span>人次提交留言 )</span>
    <el-button type="primary" style="margin-left: 50px;" size="mini" @click="loadFun1">刷新</el-button>
    <template>
        <el-table
                :data="tableData"
                border
                v-loading="flag1"
                style="width: 100%">
            <el-table-column
                    prop="date"
                    fixed
                    label="日期"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="name"
                    fixed
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="email"
                    width="200"
                    label="邮箱">
            </el-table-column>

            <el-table-column
                    prop="phone"
                    width="180"
                    label="手机号">
            </el-table-column>
            <el-table-column
                    prop="message"
                    width="300"
                    label="留言">
            </el-table-column>
            <el-table-column
                    prop="IP"
                    width="180"
                    label="IP">
            </el-table-column>
            <el-table-column
                    prop="CID"
                    label="CID">
            </el-table-column>
            <el-table-column
                    prop="city"
                    label="城市">
            </el-table-column>
            <el-table-column
                    prop="browser"
                    width="300"
                    label="浏览器">
            </el-table-column>
        </el-table>
    </template>

</div>

</body>
<script>
        new Vue({
        el: '#app',
        data: {
            tableData: [],
            visitorList: [],
            listNum:"",
            visitorNum:"",
            flag:false,
            flag1:false,
        },
        methods: {
            getlist() {
                this.flag1=true;
                axios.get( 'http://dragon.fanqinglong.com:8888/msg', {}).then( (data)=> {
                    if(data.status==200){
                        this.tableData=data.data;
                        this.visitorNum=data.data.length;
                        this.flag1=false;

                    }

                }).catch(function (error) {
                    alert(error);
                });
            },
            getVisitorList() {
                this.flag=true;
                axios.get( 'http://dragon.fanqinglong.com:8888/visitorList', {}).then( (data)=> {
                    if(data.status==200){
                        this.visitorList=data.data;
                        this.listNum=data.data.length;
                        this.flag=false;
                    }

                }).catch(function (error) {
                    alert(error);
                });
            },
            loadFun(){
                this.getVisitorList();
            },
            loadFun1(){
                this.getlist();
            }
        },
        created() {
            Promise.all([this.getVisitorList(),this.getlist()])

        }
    })

</script>

</html>